<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GDXC屏蓝牙控制器</title>
	<link rel="stylesheet" href="css/main.css?v=20250519">
</head>

<body>
    <div class="main">
        <h3>GDXC屏蓝牙控制器</h3>
        <fieldset>
            <legend>蓝牙连接</legend>
            <div class="flex-container">
                <div class="flex-group">
                    <button id="connectbutton" type="button" class="primary" onclick="preConnect()">连接</button>
                    <button id="reconnectbutton" type="button" class="secondary" onclick="reConnect()">重连</button>
					<button type="button" class="secondary" onclick="clearLog()">清空日志</button>
                </div>
				<div class="flex-group debug">
					<label for="epddriver">驱动</label>
					<select id="epddriver" onchange="filterDitheringOptions()">
						
						<option value="04">SSD1619/SSD1683（黑白屏）</option>
						<option value="02">SSD1619/SSD1683（三色屏）</option>
						<option value="06">GDT0213-JD（黑白屏）</option>
					</select>	
				</div>
				<div class="flex-group debug">
					<label for="epdpins">引脚</label>
					<input id="epdpins" type="text" value="">
					<button id="setDriverbutton" type="button" class="primary" onclick="setDriver()">确认</button>
				</div>
                <div class="flex-group">
                    <button id="calendarmodebutton" type="button" class="primary" onclick="syncTime(1)">日历模式</button>
                    <button id="clockmodebutton" type="button" class="primary" onclick="syncTime(2)">时钟模式</button>
					<button id="clearscreenbutton" type="button" class="secondary" onclick="clearScreen()">清除屏幕</button>
                </div>
                <div class="flex-group debug">
                    <input type="text" id="cmdTXT" value="">
                    <button id="sendcmdbutton" type="button" class="primary" onclick="sendcmd()">发送命令</button>
                </div>
            </div>
			<div id="log"></div>
        </fieldset>

		<fieldset>
        	<legend>蓝牙传图</legend>
			<div class="flex-container">
				<input type="file" id="image_file" onchange="update_image(true)" accept=".png,.jpg,.bmp,.webp,.jpeg">
			</div>
			<div class="flex-container">
				<div class="flex-group">
					<label for="dithering">取模算法</label>
					<select id="dithering" title="取模算法" onchange="update_image(false)">
						<optgroup data-driver="01|04|06" label="黑白">
							<option value="none">二值化</option>
							<option value="bayer">bayer</option>
							<option value="floydsteinberg">floydsteinberg</option>
							<option value="Atkinson">Atkinson</option>
						</optgroup>
						<optgroup id="dithering-bwr" data-driver="02|03" label="三色">
							<option value="bwr_floydsteinberg">黑白红floydsteinberg</option>
							<option value="bwr_Atkinson">黑白红Atkinson</option>
						</optgroup>
					</select>
				</div>
				<div class="flex-group">
					<label for="threshold">阈值</label>
					<input type="number" max="255" min="0" value="125" id="threshold" onchange="update_image(false)">
				</div>
				<div class="flex-group debug">
					<label for="mtusize">MTU</label>
					<input type="number" id="mtusize" value="20" min="0" max="255">
					<label for="interleavedcount">确认间隔</label>
					<input type="number" id="interleavedcount" value="50" min="0" max="500">
				</div>
			</div>
			<div class="status-bar"><b>状态：</b><span id="status"></span></div>
			<div class="flex-container">
				<div class="flex-group">
					<button id="clearcanvasbutton" type="button" class="secondary" onclick="clear_canvas()">清除画布</button>
					<button id="sendimgbutton" type="button" class="primary" onclick="sendimg()">发送图片</button>
				</div>
			</div>
			<div class="canvas-container">
				<div class="canvas-title"></div>
				<canvas id="canvas" width="128" height="250"></canvas>
				<div class="flex-container canvas-tools">
					<div class="flex-group">
						<button id="brush-mode" title="画笔" class="tool-button">✏️</button>
						<button id="eraser-mode" title="橡皮擦" class="tool-button">🧽</button>
						<button id="text-mode" title="添加文字" class="tool-button">T</button>
						<label for="brush-color">画笔</label>
						<select id="brush-color" title="画笔颜色">
                            <option value="#000000">黑色</option>
                            <option value="#FF0000">红色</option>
                            <option value="#FFFFFF">白色</option>
                        </select>
						<input type="number" id="brush-size" value="2" min="1" max="100" title="画笔大小">
					</div>
				</div>
				<div class="flex-container canvas-tools">
					<div class="flex-group text-tools">
						<label for="font-family">字体</label>
						<select id="font-family">
								<option value="Arial">Arial</option>
								<option value="sans-serif">Sans-serif</option>
								<option value="monospace">Monospace</option>
								<option value="SimSun">宋体</option>
								<option value="SimHei">黑体</option>
								<option value="Microsoft Yahei">微软雅黑</option>
								<option value="Microsoft JhengHei">微软正黑体</option>
								<option value="KaiTi">楷体</option>
								<option value="NSimSun">新宋体</option>
								<option value="FangSong">仿宋</option>
								<option value="YouYuan">幼圆</option>
								<option value="LiSu">隶书</option>
								<option value="STHeiti">华文黑体</option>
								<option value="STXihei">华文细黑</option>
								<option value="STKaiti">华文楷体</option>
								<option value="STSong">华文宋体</option>
								<option value="STFangsong">华文仿宋</option>
								<option value="STZhongsong">华文中宋</option>
								<option value="STHupo">华文琥珀</option>
								<option value="STXinwei">华文新魏</option>
								<option value="STLiti">华文隶书</option>
								<option value="STXingkai">华文行楷</option>
								<option value="FZShuTi">方正舒体</option>
								<option value="FZYaoti">方正姚体</option>
								<option value="PingFang SC">苹方</option>
								<option value="Source Han Sans CN">思源黑体</option>
								<option value="Source Han Serif SC">思源宋体</option>
								<option value="WenQuanYi Micro Hei">文泉驿微米黑</option>
							</optgroup>
						</select>
						<label for="font-size">字体大小</label>
						<input type="number" id="font-size" value="16" min="1" max="100">
					</div>
					<div class="flex-group text-tools">
						<input type="text" id="text-input" placeholder="输入文字" style="width:150px">
						<button id="text-bold" title="粗体">B</button>
						<button id="text-italic" title="斜体">I</button>
						<button id="add-text-btn" class="primary">添加文字</button>
					</div>
				</div>
			</div>
        </fieldset>
		<div class="footer">
			<span class="copy">&copy; 2025 tfl0528.</span>
			<span class="links">
				<a href="?debug=true" id="debug-toggle">开发模式</a>
			</span>
		</div>
    </div>
    <script type="text/javascript" src="js/dithering.js?v=20250519"></script>
    <script type="text/javascript" src="js/main.js?v=20250519"></script>
    <script type="text/javascript" src="js/paint.js?v=20250519"></script>
</body>

</html>